Cognitoのマネージドログインでpasskeyログインを試してみる

Amazon Cognitoのアップデートがあり、 Passkey を使ったログインが可能になりました。

最近Amazon Cognitoのアップデートがあり、マネージドログイン機能の導入や機能Tier概念の追加がされて、大きく変わっています。

詳しくは弊社ブログをご覧ください。

• [アップデート] Amazon Cognito で「マネージドログイン」機能が導入され、ログインメニューのブランディングのカスタマイズが可能となりました | DevelopersIO
• [アップデート] Amazon Cognito ユーザープールに「機能 Tier」の概念が追加されたので、Tier ごとに利用可能な機能をまとめてみた | DevelopersIO

そのアップデートの中の1つで、Essentials以上のプランでは、 Passkey を使ったログインが可能になっています。

マネージドログイン機能で Passkey を使ったログインをすると、どんな感じになるのか試してみました。

Passkeyを使ったログインの様子

認証したいWebアプリケーションからマネージドログイン機能のログイン画面を開いて、ユーザー名を入力します。

ログインしようとしているユーザーにPasskeyが登録されていると、Passkeyでログインすることを促されます。

続行すると、Passkeyを入力する画面が表示されたり、別のデバイスのPasskeyを使用するためにQRコードが表示されたりします。

Passkeyでログインできると、Webアプリケーションへ 認可コード がリダイレクトで返されます。

後は、Webアプリケーション側で認可コードを使って、トークンを取得してログイン処理を完了します。

この辺のPasskey前後の認証フローの細かい話が気になる方は、以前ブログで詳しく解説したのでこちらをご覧ください。

<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px;" title="AmplifyでCognitoのHosted UIを利用した認証を最低限の実装で動かしてみて動作を理解する | DevelopersIO" src="https://hatenablog-parts.com/embed?url=https://dev.classmethod.jp/articles/learn-authentication-using-cognitos-hosted-ui-with-amplify/" width="300" height="150" frameborder="0" scrolling="no"></iframe>

設定の前提

ここから先は、以下の環境が構築済みであることを前提とします。

• Cognitoユーザープールが作成済み
• カスタムドメインが設定済み
• ブランディングのマネージドログインが設定済み
• マネージドログインを利用したWebアプリケーションでのログインが実装済み

Passkeyを使ったログインの設定

まずはドキュメントを見ましょう。
2024/11/27時点では、日本語ドキュメントがまだなかったので英語のドキュメントを見ます。

• Authentication flows - Amazon Cognito

Console

To activate sign-in with passkeys, configure your user pool to permit primary sign-in with one or more passwordless types, then configure your app client to permit the USER_AUTH flow. In the Amazon Cognito console, navigate to the Sign-in menu under Authentication in your user pool configuration. Edit Options for choice-based sign-in and add Passkey to the list of Available choices.

文章だけどだとよくわからないので、あわせてマネジメントコンソールを見てみましょう。

Passkeyを有効にするには、選択ベースのサインインのオプションから、Passkeyを使用可能にする必要があるようです。

サイドバーの認証方法から、Passkeyの利用を必須にするか、任意にするかを設定できます。

今回は優先を設定しておきます。
ドメインは、Cognitoのカスタムドメインを設定していることを前提に、カスタムドメインを選択しておきます。

Navigate to the App clients menu and choose an app client or create a new one. Select Edit and under Authentication flows, choose Select an authentication type at sign-in: ALLOW_USER_AUTH.

アプリケーションクライアントで、ALLOW_USER_AUTH の認証フローを許可するように設定します。

具体的な手順は、サイドバーのアプリケーションクライアントから、アプリケーションクライアントを選択します。

編集します。

認証フローに、 選択ベースのサインイン：ALLOW_USER_AUTH が許可されていればOKです。

これで、Passkeyを使ったログインするためのCognitoの設定ができました。

Passkeyの登録

Cognito側の設定が完了したので、ユーザーのPasskeyを登録してみましょう。

マネージドログイン画面で新規ユーザーのサインアップをすると、サインアップ完了後にPasskeyの登録画面が表示されます。

MacでGoogle Chromeを使っている場合、こんな感じでPasskeyの保存場所を選択する画面が表示されます。

Passkeyの登録が完了すると、次回ログイン時にPasskeyでログインできるようになります。

サインアップ時にPasskeyを登録せず、後から登録も可能です。

その場合は、マネージドログイン画面でサインインした後、以下URLへアクセスすることでPasskeyの登録が可能です。

https://<<COGNITOカスタムドメイン名>>/passkeys/add?client_id=<<COGNITOのクライアントID>>&redirect_uri=<<COGNITOに登録しているコールバックURL>>&lang=ja

• 参考：Register a passkey(managed login) | Authentication flows - Amazon Cognito

登録したPasskeyの確認

登録したPasskeyの情報も確認してみます。

2024/11/27時点では、マネジメントコンソールからPasskeyの情報を確認する方法は見つかりませんでした。

APIを確認してみると、それっぽいAPIが増えています。

• DeleteWebAuthnCredential
• ListWebAuthnCredentials

参考：

• AWS API Changes
• DeleteWebAuthnCredential - Amazon Cognito User Pools
• ListWebAuthnCredentials - Amazon Cognito User Pools

AWS CLIも、 v2.22.4 でこれらのAPIに対応しているようです。

• aws-cli/CHANGELOG.rst at 2.22.6 · aws/aws-cli

aws cognito-idp list-web-authn-credentials コマンドを使って、登録したPasskeyの情報を確認してみます。

• list-web-authn-credentials — AWS CLI 2.22.6 Command Reference

aws cognito-idp list-web-authn-credentials コマンドの実行には、スコープに aws.cognito.signin.user.admin を持っているユーザーのアクセストークンが必要です。
アプリケーションクライアントのマネージドログインページの設定のOpenID Connectのスコープで許可していることを確認してください。

何らかの方法でアクセストークンを取得して次のコマンドを実行すると、登録したPasskeyの情報が確認できます。

$ export ACCESS_TOKEN=<<アクセストークン>>
$ aws cognito-idp list-web-authn-credentials --access-token ${ACCESS_TOKEN}
{
    "Credentials": [
        {
            "CredentialId": "ge6yIN1nCTyM_qKmkcuoow",
            "FriendlyCredentialName": "1Password",
            "RelyingPartyId": "<<Cognitoのカスタムドメイン>>",
            "AuthenticatorAttachment": "platform",
            "AuthenticatorTransports": [
                "hybrid",
                "internal"
            ],
            "CreatedAt": "2024-11-27T18:40:36.983000+09:00"
        }
    ]
}

delete-web-authn-credential を使えば、このPasskeyの登録情報を削除できます。

$ export ACCESS_TOKEN=<<アクセストークン>>
$ export CREDENTIAL_ID=<<先ほど表示したCredentialId>>
$ aws cognito-idp delete-web-authn-credential \
  --access-token ${ACCESS_TOKEN} \
  --credential-id ${CREDENTIAL_ID}

Passkey情報を削除して再度ログインを試みると、当然Passkeyのログインはできなくなり、パスワードでのログインを促されるようになります。

こんな感じで、Passkeyの登録情報を確認・削除できます。

おわりに

Cognitoのマネージドログイン機能にPasskeyが導入され、Passkeyが簡単に取り扱えるようになりました！

設定はちょっとややこしいところもありますが、その設定さえ済ませてしまえば、簡単にPasskeyを使ってログインできるようになります。
ぜひご活用ください。